<template>
  <el-main>
    <div>
      <el-table
          ref="multipleTable"
          :data="tableData"
          height="400px"
          max-height="400px"
          size="small"
          row-class-name="row"
          cell-class-name="column"
          :highlight-current-row="true"
          @selection-change="handleSelectionChange"
          fit
      >
        <el-table-column
            fixed
            type="selection"
            width="55" v-if="delButton">
        </el-table-column>
        <template v-for="(item, index) in tableHeadData">
          <el-table-column
              :key="index"
              :prop="item.prop"
              :width="item.width"
              :label="item.label"
              v-if="!item.table && !item.Formate && item.type != 'img'">
          </el-table-column>
          <el-table-column
              :key="index"
              :prop="item.prop"
              :width="item.width"
              :label="labelFormat(item.label)"
              :formatter="(row, column) => statusFormat(row, column,item.label)"
              v-if="!item.table && item.Formate && item.type != 'img'">
          </el-table-column>
          <el-table-column
              label="图片"
              prop="ImageUrl"
              align="center"
              width="100px"
              v-if="!item.table && !item.Formate && item.type === 'img'"
          >
            <template slot-scope="scope">
              <el-image
                  style="width: 50px; height: 50px; margin-bottom:-4px"
                  :src="`/api/common/download?name=${scope.row.img}`"
              >
              </el-image>
            </template>
          </el-table-column>
        </template>
        <el-table-column
            fixed="right"
            label="操作"
            width="200"
            v-if="hasOperator">
          <template slot-scope="scope">
            <template v-for="(value,index) in operator">
              <el-button type="text" v-if="!value.isShow || !value.isShow(scope.row,scope.$index)"  @click="value.click(scope.row, value)" :key="index">
                {{ value.text }}
              </el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection()" style="float: left" v-if="delButton">取消选择</el-button>
        <el-button @click="deleteSelection()" style="float: left" type="danger" v-if="delButton">删除选择</el-button>
        <el-pagination
            style="float:right;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts">
        </el-pagination>
      </div>
    </div>
  </el-main>
</template>
<script>
export default {
  props:{
    tableData:{},
    tableHeadData:{},
    operator:{},
    page:{},
    pageSize:{},
    counts:{},
    multipleTable:{},
    delButton:false,
    hasOperator:{
      type: Boolean,
      default:true
  },
  },

  computed:{
    currentPage: {
      get () {
        return this.page
      },
      set (val) {
        this.$emit('update:page', val)
      }
    },
    limit: {
      get () {
        return this.pageSize
      },
      set (val) {
        this.$emit('update:pageSize', val)
      }
    },
    multiple: {
      get () {
        return this.multipleTable
      },
      set (val) {
        this.$emit('update:multipleTable', val)
      }
    }
  },
  data(){
    return{

    }
  },
  methods:{
    handleSelectionChange (selection) {
      this.$emit('handleSelectionChangeA', selection)
    },
    toggleSelection (selection) {
      this.$emit('toggleSelectionA', selection)
    },
    deleteSelection (selection) {
      this.$emit('deleteSelectionA', selection)
    },
    handleSizeChange (selection) {
      this.$emit('handleSizeChangeA', selection)
    },
    handleCurrentChange (selection) {
      this.$emit('handleCurrentChangeA', selection)
    },
    statusFormat(row,column,item) {
      // console.log(row.radio)
      // console.log(row[column.property])
      // console.log(column)
      // console.log(row)
      const site = row[column.property]
      console.log(123123)
      const  label = item;
      const reg = /(?<=\().*(?=\))/g;
      const found = label.match(reg);
      //
      // console.log(found)

      let words = null
      if (found[0]){
        words = found[0].split(',');
      }

      if (words[site]){
        return words[site].split(':')[1]
      }else {
        return '数据错误'
      }
      // return words[row[column.property]]
    },
    labelFormat(label){
      const reg = /^((?!\(.*\)).)*/;
      return label.match(reg)[0]
    }
  }
}
</script>